<template>
    <el-form-item label-width="0">
        <el-divider class="custom-divider-margin-top">组件特有属性</el-divider>
        <div class="attributeET-editor">
            <div>
                <span class="label_">显示序号：</span>
                <el-switch v-model="optionModels.showIndex"></el-switch>
            </div>
            <div>
                <span class="label_">是否多选：</span>
                <el-switch v-model="optionModels.selectionType"></el-switch>
            </div>
            <div>
                <span class="label_">是否为斑马线：</span>
                <el-switch v-model="optionModels.stripe"></el-switch>
            </div>
            <div>
                <span class="label_">自动撑开列：</span>
                <el-switch v-model="optionModels.fit"></el-switch>
            </div>
            <div>
                <span class="label_">显示表头：</span>
                <el-switch v-model="optionModels.showHeader"></el-switch>
            </div>
            <div>
                <span class="label_">高亮选中行：</span>
                <el-switch v-model="optionModels.highlightCurrentRow"></el-switch>
            </div>
            <div>
                <span class="label_">显示操作列：</span>
                <el-switch v-model="optionModels.operationShow"></el-switch>
            </div>
            <div v-if="optionModels.operationShow">
                <span class="label_">操作列宽度：</span>
                <el-input-number :min="0" v-model="optionModels.operationWidth"></el-input-number>
            </div>
            <div v-if="optionModels.operationShow">
                <span class="label_">操作列按钮：</span>
                <div>
                    <draggable tag="ul" :list="optionModels.operation" class="dUl"
                               v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
                        <li v-for="(option, idx) in optionModels.operation" :key="idx">
                            <div class="line-icon drag-option"><i style="line-height: 32px" class="el-icon-rank"></i>
                            </div>

                            <div class="line-con">
                                <div>
                                    <span>按钮名称：</span>
                                    <el-input size="mini" v-model="option.name"></el-input>
                                </div>
                                <div>
                                    <span>绑定事件：</span>
                                    <el-select v-model="option.onClick" size="mini" clearable>
                                        <template v-for="item in methodsList">
                                            <el-option :label="item.name" :value="item.name"></el-option>
                                        </template>
                                    </el-select>
                                </div>
                            </div>

                            <div class="line-icon">
                                <el-button style="font-size: 16px" type="text" icon="el-icon-delete"
                                           @click="deleteBtn(idx)"></el-button>
                            </div>
                        </li>
                    </draggable>
                    <el-button type="text" @click="addBtn">新增一项</el-button>
                </div>
            </div>

        </div>
    </el-form-item>
</template>
<script>
import Draggable from 'vuedraggable'

export default {
    name: "attributeET-editor",
    components: {Draggable},
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options.attributeET
        },
        methodsList() {
            let list = [];
            let {pageScript: {methods}} = this.designer;
            if (methods && methods.length > 0) {
                methods.forEach(i => {
                    list.push({name: i.funName, value: i.funBody});
                })
            }
            return list;
        }
    },
    data() {
        return {}
    },
    methods: {
        deleteBtn(index) {
            this.optionModels.operation.splice(index, 1)
        },
        addBtn() {
            this.optionModels.operation.push({
                name: "按钮" + (this.optionModels.operation.length + 1),
                onClick: ""
            })
        }
    }
}
</script>
<style scoped lang="scss">
.attributeET-editor {
  > div {
    .label_ {
      display: inline-block;
      width: 120px;
      box-sizing: border-box;
      padding-right: 12px;
      font-size: 13px;
      color: #606266;
    }
  }
}

.dUl {
  padding-left: 0;
  list-style: none;

  > li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    border: 1px solid #f2f2f2;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;

    .line-con {
      width: calc(100% - 60px);

      > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-top: 5px;

        > span {
          display: inline-block;
          width: 90px;
          font-size: 12px;
        }

        .el-select {
          width: 100%;
        }
      }
    }

    .line-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
